<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li><input type="checkbox" />音乐1</li>
      <li><input type="checkbox" />音乐2</li>
      <li><input type="checkbox" />音乐3</li>
    </ul>
    全选: <input type="checkbox" class="checkall" />
    <script>
      var arr = [
        {
          isChecked: false, // 如果 是true 那么 是勾选状态 ，否则是不勾选状态
          musicName: "音乐1",
        },
        {
          isChecked: false,
          musicName: "音乐2",
        },
        {
          isChecked: false,
          musicName: "音乐3",
        },
        {
          isChecked: false,
          musicName: "音乐4",
        },
        {
          isChecked: false,
          musicName: "音乐5",
        },
      ];

      //一.根据arr数据渲染视图
      var ulEle = document.querySelector("ul");
      function renderDom(arr) {
        ulEle.innerHTML = "";
        arr.forEach(function (item, key) {
          var liEle = document.createElement("li");
          if (item.isChecked) {
            //item里的isChecked是true
            liEle.innerHTML = `<input type="checkbox" checked/>${item.musicName}`;
          } else {
            //item里的isChecked 是false
            liEle.innerHTML = `<input type="checkbox"/>${item.musicName}`;
          }
          liEle.onclick = function (e) {
            // console.log(e.target);
            if (e.target.nodeName === "INPUT") {
              //   console.log("点击了checkbox");
              console.log(e.target.checked); //是否被勾选的状态,如果被勾选了那么就是true,否则就是false
              //把当前数据的isChecked修改成和视图一致
              //   console.log(arr);
              //   console.log(key);
              arr[[key]].isChecked = e.target.checked;
              //   console.log(arr);
              //可以通过数据来判断是否需要全选
              var res = arr.every(function (item) {
                return item.isChecked;
              });
              //   var res =arr.every(item=>item.isChecked)
              console.log("最终的结果是", res);
              document.querySelector(".checkall").checked = res;
            }
          };
          ulEle.appendChild(liEle);
        });
      }
      renderDom(arr);
    </script>
  </body>
</html>
